<template>
  <div>
    <div class="ContentBox">
      <div class="InputBoxs">
        <el-form :model="FormData" label-width="20px" class="Forms" :rules="rules" ref="Form">
          <el-form-item>
            <template>
              <div class="text">{{ ParentData.onePo }}</div>
              <el-input v-model="FormData.code" :placeholder="core" style="width: 300px;" :disabled="true" />
            </template>
          </el-form-item>
          <el-form-item prop="name">
            <template>
              <div class="text required">{{ ParentData.twoPo }}</div>
              <el-input v-model="FormData.name" placeholder="请输入" style="width: 300px;" />
            </template>
          </el-form-item>
          <el-form-item prop="type">
            <template>
              <div class="text required">{{ ParentData.threePo }}</div>
              <el-select v-model="FormData.type" placeholder="请选择" style="width: 300px;" clearable>
                <el-option v-for="(item, index) in data" :key="index" :label="item.name" :value="item.type" />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item prop="selectedOptions">
            <template>
              <div class="text required">{{ ParentData.fourPo }}</div>
              <el-cascader
                v-model="selectedOptions"
                size="large"
                :options="options"
                style="width: 620px"
                placeholder="请输入"
                @change="handleChange"
              />
            </template>
          </el-form-item>
          <el-form-item prop="address">
            <template>
              <div class="text">{{ ParentData.fixPo }}</div>
              <el-input v-model="FormData.address" placeholder="请输入" style="width: 620px;" />
            </template>
          </el-form-item>
          <el-form-item prop="status">
            <template>
              <div class="text required">{{ ParentData.sixPo }}</div>
              <el-radio v-model="FormData.status" label="1">启用</el-radio>
              <el-radio v-model="FormData.status" label="0">停用</el-radio>
            </template>
          </el-form-item>
          <el-form-item prop="surface">
            <template>
              <div class="text">{{ ParentData.sevenPo }}</div>
            </template>
            <el-input v-model="FormData.surface" placeholder="请输入" style="width: 300px;">
              <template slot="append">
                <div>m³</div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="personName">
            <template>
              <div class="text required">{{ ParentData.ninePo }}</div>
              <el-input v-model="FormData.personName" placeholder="请输入" style="width: 300px;" />
            </template>
          </el-form-item>
          <el-form-item prop="phone">
            <template>
              <div class="text">{{ ParentData.tenPo }}</div>
              <el-input v-model="FormData.phone" placeholder="请输入" style="width: 300px;" />
            </template>
          </el-form-item>
        </el-form>
        <div class="FormBtn">
          <el-button type="warning" style="background-color: #f8f5f5;" @click.native="Back">返回</el-button>
          <el-button type="warning" @click="Submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NewCode, ModifyManageBaseInfoList, EchoData, ModifyWarehouse } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
import RouteData from '@/utils/RouteData'
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      // 编码
      core: '',
      data: [
        { type: 'ZZ', name: '中转仓' },
        { type: 'JD', name: '加工仓' },
        { type: 'CB', name: '储备仓' },
        { type: 'LC', name: '冷藏仓' }
      ],
      ParentData: {},
      FormData: {
      },
      rules: {
        name: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入仓库类型', trigger: 'blur' }
        ],
        selectedOptions: [
          { required: false, message: '请输入省/市/区', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入仓库状态', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.ParentData = RouteData(this.$route)
    this.NewCodeFn()
    if (this.$route.params.Id) {
      this.EchoDataFn()
    }
  },
  methods: {
    handleChange(area) {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]] + '/'
      }
      console.log(area)
      this.FormData.location = loc.split('/').splice(0, 3).join('/')
      this.FormData.area = area.at(-1)
      this.FormData.city = area.at(0)
      this.FormData.province = area.at(1)
    },
    // 提交
    async Submit() {
      this.$refs.Form.validate(async(vala) => {
        if (vala) {
          let msg = ''
          try {
            if (this.$route.params.Data) {
              msg = await ModifyManageBaseInfoList(this.FormData)
            } else {
              msg = await ModifyWarehouse(this.FormData)
            }
            if (msg.data.isSuccess) {
              this.$router.go(-1)
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$message({
                message: msg.data.msg,
                type: 'success'
              })
              return
            }
            if (msg.data.isError) {
              this.$message({
                message: msg.data.msg,
                type: 'warning'
              })
              return
            }
          } catch (err) {
            this.$message({
              message: msg.data.msg,
              type: 'warning'
            })
          }
        }
      })
    },
    async NewCodeFn() {
      const res = await NewCode('CK')
      this.core = res.data.data
      this.FormData.code = this.core
    },
    // 修改回显
    async EchoDataFn() {
      const res = await EchoData(this.$route.params.Id)
      this.FormData = res.data.data
    },
    // 返回
    Back() {
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  }
}
</script>

